<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <title>常用选择器</title>

    <style>
        /* 
        将所有的段落设置为红色(字体)

        元素选择器
            作用：根据标签名来选中指定的元素
            语法：标签名{}
            例子:p{} h1{} div{}
        */
        /* p{
            color: cadetblue;
            font-size: 30px;
        } */
        /* h1{
            color: coral;
        } */

        /* 将儿童相加不相识设置为绿色
        
        id选择器
            作用：根据元素的id属性值选中一个元素
            语法：#id属性值{}
            例子：#box{} #red{}
        
        */
        #green{
            color: green;
        }

        /* 
        将秋水...和落霞...设置为粉色
        类选择器
            作用:根据元素的class属性值选中一组元素
            语法:.class属性值
        */
        .pink{
            color: pink;
        }
        .big{
            font-size: 50px;
        }

        /* 
        统配选择器
            作用：选中页面中的所有元素
            语法:*
        */
        *{
            color: plum;
        }

    </style>
</head>
<body>
    <h1 class="pink big">我是标题</h1>
    <p>少小离家老大回</p>
    <p>乡音无改鬓毛衰</p>
    <p id="green">儿童相见不相识</p>
    <p>笑问客从何处来</p>

    <!-- 
        class是一个标签属性，它和id类似，不同的是class可以重复使用
            可以通过class属性来为元素分组
            可以同时为一个元素指定多个class属性
     -->

    <p class="pink">秋水共长天一色</p>
    <p class="pink">落霞与孤鹜齐飞</p>

</body>
</html>